<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>用户注册</title>
		<link rel="stylesheet" href="../static/css/bootstrap.css">
		<link rel="stylesheet" href="../static/css/register.css">
		<script src="../static/js/jquery.js"></script>
		<script src="../static/js/bootstrap.js"></script>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<div class="navbar-header" style="margin-left: 50px;margin-top: -10px">
				<a href="/index/toIndex"><h3>家政服务系统</h3></a>
			</div>

			<div>
				<ul class="nav navbar-nav">
					<li>
						<a href="/index/toIndex">
							<span class="glyphicon glyphicon-home"></span>
							首页
						</a>
					</li>
					<li>
						<a href="/user/toRegister">
							<span class="glyphicon glyphicon-user"></span>
							注册
						</a>
					</li>
					<li>
						<a href= "/user/toLogin" >
							<span class="glyphicon glyphicon-log-in"></span>
							登录
						</a>
					</li>
				</ul>
			</div>
		</nav>
	
		<div class="container">
			<div class="h2">
				用户注册
			</div>
			
			<div class="col-md-8">
				<form class="form-horizontal" role="form" action="#">
					
					<div class="form-group">
						<label class="col-md-2 control-label">手机号码</label>
						<div class="col-md-10">
							<input name="username" class="form-control" type="text" placeholder="请输入当前手机号码">
						</div>
						<div class="small info text-danger">
							<span class="phone-check">号码格式不正确,请重新输入!</span>
						</div>
					</div>
					

					
					<div class="form-group">
						<label class="col-md-2 control-label">密码</label>
						<div class="col-md-10">
							<input name="password" class="form-control" type="password" placeholder="请输入密码">
						</div>
						<div class="small info text-danger">
							<span class="pwd-check">密码不能为空,请重新输入!</span>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-md-2 control-label">确认密码</label>
						<div class="col-md-10">
							<input name="again-password" class="form-control" type="password" placeholder="请输入确认密码">
						</div>
						<div class="small info text-danger">
							<span class="againPwd-check">输入内容为空,请重新输入!</span>
						</div>
							
					</div>

					<div class="form-group">
						<label class="col-md-2 control-label">角色类型</label>
						<div class="col-md-10">
							<div class="col-md-6">
								<input name="user-type" value="0" type="radio" id="radio1" checked="checked">
								<label for="radio1">普通用户</label>
							</div>
							<div class="col-md-6">
								<input name="user-type" value="1" type="radio" id="radio2">
								<label for="radio2">家政人员</label>
							</div>
						</div>
						<div class="small info text-danger">
							<span class="nickname-check">登录名称不能为空!</span>
						</div>
					</div>
					
					<div class="form-group" style="text-align: center">
						<input id="submit" type="button" class="btn btn-primary" value="注册">
						<input type="button" class="btn btn-default" value="取消">
					</div>
					
					<div class="text-center small">
						点击"注册"按钮即表示同意并愿意遵守<a href= "/protocol">用户协议</a>
					</div>
				</form>
			</div>
			
			
			<div class="col-md-4">
				<img alt="图片" src="../static/images/main.png">
			</div>
		</div>
		

	</body>
</html>
<script>
	var curWwwPath = window.location.href;
	var pathName = window.location.pathname;
	var ctx = curWwwPath.substring(0,curWwwPath.indexOf(pathName));

	$(".form-control").eq(0).blur(
		function () {
			var pattern = /^1[34578]\d{9}$/;
			var flag = false;
			if ($(this).val() == "") {
				$(".phone-check").html("手机号码不能为空!");
				flag = true;
			} else if ($(this).val().length != 11) {
				$(".phone-check").html("请输入有效的手机号码!");
				flag = true;
			} else if (!(pattern.test($(this).val()))) {
				flag = true;
			} else {
				flag = false;
			}
			
			if (flag) {
				$(".phone-check").show();
			} else {
				$(".phone-check").hide();
			}
		}
	);
	
	$(".form-control").eq(1).blur(
		function () {
			if ($(this).val() == "") {
				$(".pwd-check").show();
			} else {
				$(".pwd-check").hide();
			}
		}
	);
	
	$(".form-control").eq(2).blur(
		function () {
			var thisVal = $(this).val();
			var lastVal = $(".form-control").eq(1).val();
			if ($(this).val() == "") {
				$(".againPwd-check").show();
			} else if (thisVal != lastVal){
				$(".againPwd-check").html("两次输入的密码不一致，请重新输入!");
			} else {
				$(".againPwd-check").hide();
			}
		}
	);

	// 点击按钮，提交内容
	$("#submit").click(function () {
	    if (!testFull()) {
	        alert("请将注册信息填写完整！");
		} else {
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            var role = $("input[name='user-type']:checked").val();
            $.ajax({
                "url": ctx + "/user/register",
                "data": "username="+username+"&password="+password+"&role="+role,
                "type": "post",
                "dataType": "json",
                "success": function(json) {
                    if (json.state == 200) {
                        alert("注册成功！");
                        window.location.href = ctx + "/index/toIndex";
                    } else if (json.state == 401) {
                        alert("注册失败！" + json.message);
                    }
                }
            })
		}
    })

	// 判断注册的内容是否填写完整
	function testFull() {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var againPassword = $("input[name='again-password']").val();
        var role = $("input[name='user-type']:checked").val();
        if (username == "" || password == "" || againPassword == "" || role == "") {
            return false;
		} else {
            return true;
		}
    }
</script>